<template>
	<view >
		<chatHader @haderLookFor='haderLookFor' @haderPortrait='haderPortrait' :haerd='haerd' @indexIdClick='indexIdClick'></chatHader>
		
		
		<view class="boxconet">
			<view class="isnull" v-if="list.length === 0">
				<image src="http://www.huohuo90.com/assets/%E6%B6%82%E9%B8%A6.png" mode=""></image>
				<text>快去添加好友吧</text>
				<view class="isnull_bnt">
					<text @click="haderLookFor">加好友</text>
				</view>
			</view>
			<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in list" :key="item.id" @click="click" @open="open"
			 :options="options">
				<view class="item u-border-bottom" @click="toInfo(item)">
					<!-- <u-badge type="error" count="7">

					</u-badge> -->
					<image mode="aspectFill" :src="item.images || '../../../../../static/logo.png'" />
					<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
					<view class="title-wrap">
						<!-- <text class="title u-line-2">2222</text> -->
						<text class="title u-line-2">{{ item.usermali }}</text>
					</view>
					<view class="time">
						上午7:45
					</view>
				</view>
			</u-swipe-action>
		</view>
		<corresponding v-if='corresponding'></corresponding>
	</view>
</template>

<script>
	import {
		getState
	} from "../../../../../store";
	export default {
		data() {
			return {
				list: [
				],
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [
					// {
					// 	text: '收藏',
					// 	style: {
					// 		backgroundColor: '#007aff'
					// 	}
					// },
					{
						text: '聊天记录删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				userUUID: '',
				haerd:{},
				corresponding:false,
			}
		},
		onPullDownRefresh(){
			this.getuserlist()
		},
		onLoad() {
			this.getuserlist();
			const {
				usermali,nickname,img
			} = getState('user', 'userInfo');
			uni.getStorage({
			    key: 'userInfo',
			    success:  (res)=> {
					this.haerd = res.data;
					this.userUUID = this.haerd.usermali;
			    }
			});
		
			this.socket.emit('NewUserAdd', this.userUUID);
			this.socket.on('receive private message', (data) => {
				console.log(data);
			});
			
		},
		methods: {
			async click(index, index1) {
				console.log(index, index1);
				if (index1 == 0) {
					this.$u.toast(`删除了第${index}个cell`);
					const {usermali:toPut} = this.list[index1];
					await this.http(this.api.delRecords,{toPut})
					// console.log(this.list[index1],{});
					// 
				} 
				
				// else {
				// 	this.list[index].show = false;
				// 	this.$u.toast(`收藏成功`);
				// }
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				})
			},
			haderLookFor() {
				uni.navigateTo({
					url: './addUser',
				});
			},
			toInfo(data) {
				uni.navigateTo({
					url: `./chatInfo?uuSendId=${data.usermali}`,
				});
			},
			async getuserlist() {
				// this.corresponding = true;
				this.list = await this.http(this.api.myuserlist, {
					friend_I: this.userUUID
				}).catch()
				console.log(this.list,1111111);
				// this.corresponding = false;
				uni.stopPullDownRefresh();
			},
			indexIdClick({index,data}){
				console.log(data);
				data.text.includes('好友申请') && uni.navigateTo({
					url: './friendRequest',
				});
			},
			haderPortrait(){
				uni.navigateTo({
					url: `./informationAdd`,
				});
			}
		}
	}
</script>

<style scoped lang="less">
	@import '../../../../../static/css/common.less';

	.item {
		display: flex;
		padding: 20rpx;
	}

	image {
		width: 80rpx;
		flex: 0 0 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}

	.title {
		text-align: left;
		font-size: 28rpx;
	}

	.title-wrap {
		width: 70%;
	}

	.time {
		width: 18%;
		.centered();
	}

	.isnull {
		width: 100vw;
		max-height: 80vh;
		min-height: 60vh;
		display: inline-grid;
		align-items: center;
		justify-content: center;
		text-align: justify;

		.isnull_bnt {
			width: 20vw;
			height: 63rpx;
			background: #FFE431;
			box-shadow: 0 26px 18px -16px rgba(255, 228, 49, 0.40);
			border-radius: 24px;
			border-radius: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: justify;

			text {
				font-size: 14px;
				color: #272832;
				letter-spacing: -0.48px;
				.centered();
			}
		}

		image {
			width: 158rpx;
			height: 250rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: justify;
		}

		text {
			font-family: PingFangSC-Regular;
			font-size: 14px;
			color: rgba(39, 40, 50, 0.40);
			letter-spacing: -0.48px;
		}
	}
</style>
